<template>
  <div class='mail-list'>
    <div class="title">
      <span @click="dias.select=true">{{departmentName}} <van-icon name="arrow-down" class="arrow-down" /></span>
      <div class="search-box pr">
        <Search class="search pa" :search="searchInfo" @new_search="getSearchData" />
      </div>
    </div>
    <mySelect :showdias="dias" :columns="selectData.data1 | formatArray" value-key="department" @onCancel="dias.select=false" @onConfirm="confirm" />
    <List :listData="listData" @forMore="getMoreInfo">
      <ListModel :listData="listData"/>
    </List>
  </div>
</template>
<script>
import MixIns from '../../../mixin/mixin.js'
import mySelect from '../../../components/select.vue'
import Search from '../../../components/search.vue'

import List from '../../../components/list.vue'
import ListModel from './model/list'
export default {
  components: {mySelect,Search,List,ListModel},
  name: "",
  data() {
    return {
      dias:{
        select:false,
      },
      departmentName:'全部',
      searchInfo:{
        department:"0",
        search:"",
      },
      columns:['全部','功能改进', '生活','情感','就业','学习']
    };
  },
  filters:{
    formatArray(array){
      var goal=JSON.parse(JSON.stringify(array))
      goal.unshift({id:0,department:"全部"})
      return goal.map(val=>val.department)
    }
  },
  methods: {
    confirm(val){
      this.departmentName=val
      this.dias.select=false
      this.searchInfo.department=0
      for(var i=0;i<this.selectData.data1.length;i++){
        if(val==this.selectData.data1[i].department){
          this.searchInfo.department=this.selectData.data1[i].id;
          break;
        }
      }
      this.getListData()
    },
    getMoreInfo(){
      if(!this.moreInfo.show){
        this.pageInfo.page++
        this.getListData()
      }
    },
    getSearchData(){
      this.pageInfo.page=1
      this.getListData()
    }
  },
  created() {},
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.mail-list {

  .title{
    font-size: 16px;
    color: #fff;
    line-height: 90px;
    height: 90px;
    background-color: #00998d;
    display: flex;

    span{
      margin-left: 25px;
    }
  }
  .arrow-down{
    transform: translateY(2.5px)
  }
  .search-box{
    margin: 0 60px 0 80px;
    flex: 1;

    >.search{
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>